<template>
  <li @click="goodsDetail(bookInfo.id)">
    <a class="co-img">
      <img width="203" height="189" :src="$store.state.baseImgUrl+bookInfo.img">
    </a>
    <div class="col-div">
      <div class="coll-dv">
        <h2><a style="color: lightslategray;">{{ bookInfo.name }}</a></h2>
        <p class="zt"></p>
        <p style="color:#000; padding:8px 0;">￥<span style="font-size:18px;">{{ bookInfo.price }}</span></p>
        <p class="zt t-ac">销量{{ bookInfo.saleCount }}本</p>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: "BookItem",
  props: {
    bookInfo: {},
  },
  data() {
    return {
      baseImgUrl: '',
    }
  },
  methods: {
    goodsDetail(id) {
      this.$router.push({path: '/purchasePage', query: {curBookId: id}})
      //最近浏览
      var storage=window.localStorage;
      let data=storage.bookId
      if(data==null){
        return storage.setItem("bookId",this.bookInfo.id)
      }else {
        let datas=data.split(",")
        for (let i = 0; i < datas.length; i++) {
          if(this.bookInfo.id==datas[i]){
            if(this.bookInfo.id==datas[0]){
              return
            }else {
              data=datas.slice(0,i)+","+datas.slice(i+1,datas.length)
              return storage.setItem("bookId",this.bookInfo.id+","+data)
            }
          }
        }
        return storage.setItem("bookId",this.bookInfo.id+","+data)
      }
    },
  },
  created() {
    this.baseImgUrl = this.$store.state.baseImgUrl
  }
}
</script>

<style scoped>

.shop-ul li {
  float: left;
  border: 1px solid #BFBFBF;
  margin: 0px 2px 29px;
  width: 224px;
}

.shop-ul li .co-img {
  display: block;
  margin: 10px;
}

.shop-ul li .col-div {
  overflow: hidden;
}

.coll-dv {
  background: #f5f5f5;
  padding: 18px;
}

.coll-dv h2 {
  font-size: 16px;
  height: 48px;
  overflow: hidden;
}

.zt {
  font-family: "宋体";
}

.t-ac {
  color: #b50029;
}
</style>